<template>
  <div class="service-log">
    <ts-header title="服务记录" back></ts-header>
    <ts-group>
      <ts-filed label="主机名称" v-model="title" labelWidth="1.52rem"></ts-filed>
      <ts-filed label="主机编码" v-model="records_code" labelWidth="1.52rem"></ts-filed>
      <ts-filed label="服务记录" v-model="content" labelWidth="1.52rem" type="textarea">
      </ts-filed>
      <uploader title="服务照片" labelSize=".30rem"
                labelWidth="1.52rem" headTips="最多上传20张"
                updTips="拍照上传"
                v-model="images"
                @deleteImg="deleteImg"
                @loadImageUpload="upload"></uploader>
    </ts-group>
    <div class="tf-save" ref="save">
      <ts-button size="large" @click="savaRecords" type="primary">保存</ts-button>
    </div>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </div>
</template>

<script>
  import {ADD_SERVICE_RECORDS, ORDER_TAKING} from '../../assets/js/api'
  import transfer from '../../core/transfer'
  import verify from '../../utils/verify'
  import objectAssign from 'object-assign'
  import {Actionsheet} from 'mint-ui';
  import Loading from '../../components/tsui/loading'

  let arrIndex;
  let components = {};
  components[Actionsheet.name] = Actionsheet;
  export default {
    name: 'serviceLog',
    data() {
      return {
        order_id: null,
        title: '',
        records_code: '',
        content: '',
        images: [],
        sheetVisible: false,
        actions: [{
          name: '拍照',
          method: this.loadImageUpload
        }, {
          name: '从相册选择',
          method: this.loadImageUpload_album
        }]
      }
    },
    components: components,
    created() {
      this.order_id = this.$route.params.order_id;
      arrIndex = this.$route.params.arrIndex;
    },
    methods: {
      upload() {
        this.sheetVisible = !this.sheetVisible
      },
      loadImageUpload() {
        let onCameraSuccess = (imageURI) => {
          if (this.images.length <= 20) {
            this.images.push(imageURI);
          } else {
            this.$toast({
              message: '最多可上传20张',
              duration: 1500
            });
          }
        };
        let onCameraError = (message) => {
        };
        if ($prod) {
          navigator.camera.getPicture(onCameraSuccess, onCameraError, {
            //质量
            quality: 100,
            //不允许编辑
            allowEdit: false,
            //获取图片转为base64
            destinationType: Camera.DestinationType.DATA_URL,
            //编码类型JPEG
            encodingType: Camera.EncodingType.JPEG,
            //只允许拍摄图片
            mediaType: Camera.MediaType.PICTURE,
            //按比例缩小图片宽度，单位px,kej
            targetWidth: 375
          });
        }
      },
      loadImageUpload_album() {
        let onCameraSuccess = (imageURI) => {
          if (this.images.length <= 20) {
            this.images.push(imageURI);
          } else {
            this.$toast({
              message: '最多可上传20张',
              duration: 1500
            });
          }
        };
        let onCameraError = (message) => {
        };
        if ($prod) {
          navigator.camera.getPicture(onCameraSuccess, onCameraError, {
            //质量
            quality: 100,
            //不允许编辑
            allowEdit: false,
            //获取图片转为base64
            destinationType: Camera.DestinationType.DATA_URL,
            //编码类型JPEG
            encodingType: Camera.EncodingType.JPEG,
            //只允许拍摄图片
            mediaType: Camera.MediaType.PICTURE,
            //按比例缩小图片宽度，单位px,kej
            sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
            targetWidth: 375,
          });
        } else {
          alert('当前 设备不支持')
        }
      },
      deleteImg(index) {
        this.images.splice(index, 1);
      },
      async savaRecords() {
        if (this.checkForm().isValid) {
          let {member_id} = this.$store.state.currentUser;
          let dataIndex = {
            order_id: this.order_id,
            title: this.title,
            records_code: this.records_code,
            content: this.content,
            images: this.images
          }
          let json = await this.$http.post(ADD_SERVICE_RECORDS, objectAssign(dataIndex, {member_id}), {show: true});
          if (json.result === 1) {
            let {member_id} = this.$store.state.currentUser;
            let lastJson = await this.$http.post(ORDER_TAKING, {member_id, order_id: this.order_id, type: 4});
            if (lastJson.result === 1) {
            transfer.$emit('finished', (this.order_id, arrIndex));
            this.$modal.alert({message: '添加成功', lock: true}).then(action => {
              this.$router.goBack();
            });
            }
          }
        }
      },
      checkForm() {
        let {isValid, key} = verify.requiredObjProp(this.$data);
//        console.log(key)
        if (!isValid) {
          let message = '';
          switch (key) {
            case 'title':
              message = '请输入主机名称';
              break;
            case 'records_code':
              message = '请输入主机编码';
              break;
            case 'content':
              message = '请输入服务记录';
              break;
            case 'images':
              message = '请拍照上传服务照片';
              break;
            default:
              break;
          }
          this.$toast({message, position: 'bottom'});
          return {isValid, key}
        } else {
          return {isValid};
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tf-save {
    padding: 0 .36rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .35rem;
  }
</style>
